<script setup>
import { ref } from 'vue'
import ChannelSelect from './components/ChannelSelect.vue'
import { userGetInfoService, userGpaService } from '../../api/user'

const total = ref(0) // 总条数
const loading = ref(false) // loading状态
// 定义绩点请求参数对象
const filterForm = ref({
  studentGrade: '',
  minGpa: '',
  maxGpa: ''
})

// 定义分页请求参数对象
const params = ref({
  type: '', //升序还是降序
  current: 1, // 当前页
  size: 5, // 当前生效的每页条数
  cate_id: ''
})

// 定义学生信息列表
const StudentList = ref([])

// 基于params参数，获取学生信息列表
const getArticleList = async () => {
  loading.value = true
  const res = await userGetInfoService(params.value)
  StudentList.value = res.data.data.records
  total.value = res.data.data.total
  loading.value = false
}
getArticleList()

// 处理分页逻辑
const onSizeChange = (size) => {
  // 只要是每页条数变化了，那么原本正在访问的当前页意义不大了，数据大概率已经不在原来那一页了
  // 重新从第一页渲染即可
  params.value.current = 1
  params.value.size = size
  // 基于最新的当前页 和 每页条数，渲染数据
  getArticleList()
}
// 当前页的渲染
const onCurrentChange = (page) => {
  // 更新当前页
  params.value.current = page
  // 基于最新的当前页，渲染数据
  getArticleList()
}

// 搜索
const Search = async () => {
  const res = await userGpaService(filterForm.value)
  StudentList.value = res.data.data
}

// 重置逻辑 => 将筛选条件清空，重新检索，从第一页开始展示
const onReset = () => {
  params.value.current = 1 // 重置页面
  params.value.cate_id = ''
  params.value.type = ''
  getArticleList()
}

// 弹窗层
const dialogFormVisible = ref(false)
// 弹窗回显数据
const selectedStudent = ref({})
// 显示个人信息
const showStudentInfo = (row) => {
  console.log(row)
  selectedStudent.value = row
  console.log(selectedStudent.value)
  dialogFormVisible.value = true
}

// 排序
const handleSortChange = async ({ order }) => {
  if (order === 'ascending') {
    // 使用 await 等待异步请求结果
    params.value.type = 'asc'
    getArticleList()
  } else if (order === 'descending') {
    params.value.type = 'desc'
    getArticleList()
  } else {
    params.value.type = ''
    getArticleList()
  }
}

// 点击实现表格下载
// const downloadTable = () => {
//   const header = Object.keys(StudentList.value[0])
//   const data = StudentList.value.map((item) => Object.values(item))
//   const csv = [header.join(','), ...data.map((row) => row.join(','))].join('\n')

//   const blob = new Blob([csv], { type: 'text/csv' })
//   const link = document.createElement('a')
//   link.href = window.URL.createObjectURL(blob)
//   link.download = 'table.csv'
//   link.click()
// }
const downloadTable = () => {
  const header = ['学生姓名', '学生学号', '学生年级', '学生绩点', '专业排名']
  const data = StudentList.value.map((item) => [
    item.studentName,
    item.studentId,
    item.studentGrade,
    item.studentGpa,
    item.professionalRanking
  ])
  const csv = [header.join(','), ...data.map((row) => row.join(','))].join('\n')

  const blob = new Blob([csv], { type: 'text/csv' })
  const link = document.createElement('a')
  link.href = window.URL.createObjectURL(blob)
  link.download = 'table.csv'
  link.click()
}
</script>

<template>
  <page-container title="学生成绩查看">
    <template #extra>
      <el-button type="primary" @click="downloadTable">下载表格</el-button>
    </template>
    <!-- 表单区域 -->
    <div class="search-area">
      <el-row>
        <el-form :model="StudentList">
          <!-- 学生年级查询 -->
          <el-row>
            <el-col :span="6"
              ><el-form-item label="学生年级">
                <ChannelSelect
                  v-model="filterForm.studentGrade"
                ></ChannelSelect>
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 绩点范围查询 -->
          <el-form-item label="绩点范围" class="range">
            <el-input
              v-model="filterForm.minGpa"
              placeholder="请输入最小绩点"
              style="width: 250px"
            ></el-input>
            <span style="margin: 0 10px">-</span>
            <el-input
              v-model="filterForm.maxGpa"
              placeholder="请输入最大绩点"
              style="width: 250px; margin-right: 50px"
            ></el-input>
            <el-button @click="Search" type="primary">查询</el-button>
            <el-button @click="onReset">重置</el-button>
          </el-form-item>
        </el-form>
      </el-row>
    </div>

    <!-- 表格区域 -->
    <el-table
      v-loading="loading"
      :data="StudentList"
      @sort-change="handleSortChange"
    >
      <el-table-column type="index" label="序号"></el-table-column>
      <el-table-column prop="studentId" label="学号"></el-table-column>
      <el-table-column prop="studentName" label="姓名">
        <template #default="{ row }">
          <el-button @click="showStudentInfo(row)">{{
            row.studentName
          }}</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="studentGpa" label="绩点" sortable="custom">
      </el-table-column>
      <el-table-column
        prop="professionalRanking"
        label="专业排名"
      ></el-table-column>
    </el-table>

    <!-- 分页区域 -->
    <el-pagination
      v-model:current-page="params.current"
      v-model:page-size="params.size"
      :page-sizes="[2, 3, 5, 10]"
      :background="true"
      layout="jumper, total, sizes, prev, pager, next"
      :total="total"
      @size-change="onSizeChange"
      @current-change="onCurrentChange"
      style="margin-top: 20px; justify-content: flex-end"
    />

    <!-- 弹窗 -->
    <el-dialog
      v-model="dialogFormVisible"
      :model="selectedStudent"
      :title="selectedStudent.studentName + '的个人信息'"
      style="width: 650px"
    >
      <el-form style="padding-left: 25px">
        <el-form :model="selectedStudent" :inline="true">
          <el-form-item label="学号" style="margin-left: 28px">
            <el-input
              v-model="selectedStudent.studentId"
              autocomplete="off"
              disabled
              style="width: 179px"
            />
          </el-form-item>
          <el-form-item label="姓名" style="margin-left: 42px">
            <el-input
              v-model="selectedStudent.studentName"
              autocomplete="off"
              disabled
              style="width: 179px"
            />
          </el-form-item>
        </el-form>
        <el-form :model="selectedStudent" :inline="true">
          <el-form-item label="性别" style="margin-left: 28px">
            <el-input
              v-model="selectedStudent.studentSex"
              autocomplete="off"
              disabled
              style="width: 179px"
            />
          </el-form-item>

          <el-form-item label="班级" style="margin-left: 42px">
            <el-input
              v-model="selectedStudent.studentClass"
              autocomplete="off"
              disabled
              style="width: 179px"
            />
          </el-form-item>
        </el-form>
        <el-form :model="selectedStudent" :inline="true">
          <el-form-item label="年级" style="margin-left: 28px">
            <el-input
              v-model="selectedStudent.studentGrade"
              autocomplete="off"
              disabled
              style="width: 179px"
            />
          </el-form-item>
          <el-form-item label="政治面貌" style="margin-left: 14px">
            <el-input
              v-model="selectedStudent.politicalStatus"
              autocomplete="off"
              disabled
              style="width: 179px"
            /> </el-form-item
        ></el-form>
        <el-form :model="selectedStudent" :inline="true">
          <el-form-item label="所在部门">
            <el-input
              v-model="selectedStudent.department"
              autocomplete="off"
              disabled
              style="width: 179px"
            />
          </el-form-item>
          <el-form-item label="双创职位" style="margin-left: 14px">
            <el-input
              v-model="selectedStudent.holdPosition"
              autocomplete="off"
              disabled
              style="width: 179px"
            /> </el-form-item
        ></el-form>
        <el-form :model="selectedStudent" :inline="true">
          <el-form-item label="电话号码">
            <el-input
              v-model="selectedStudent.studentTel"
              autocomplete="off"
              disabled
              style="width: 179px"
            />
          </el-form-item>
          <el-form-item label="所在宿舍" style="margin-left: 14px">
            <el-input
              v-model="selectedStudent.studentDormitory"
              autocomplete="off"
              disabled
              style="width: 179px"
            /> </el-form-item
        ></el-form>
        <el-form :model="selectedStudent" :inline="true">
          <el-form-item label="辅导员姓名" style="margin-left: -14px">
            <el-input
              v-model="selectedStudent.studentCounsellor"
              autocomplete="off"
              disabled
              style="width: 179px"
            />
          </el-form-item>
          <el-form-item label="辅导员电话">
            <el-input
              v-model="selectedStudent.counsellorTel"
              autocomplete="off"
              disabled
              style="width: 179px"
            /> </el-form-item
        ></el-form>
        <el-form :model="selectedStudent">
          <el-form-item label="个人介绍" style="margin-left: -35px">
            <el-input
              disabled
              v-model="selectedStudent.showStudentInstruction"
              :rows="3"
              type="textarea"
              autocomplete="off"
            />
          </el-form-item> </el-form
      ></el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="dialogFormVisible = false">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>
  </page-container>
</template>

<style lang="scss" scoped></style>
